// echarts  相关配置项
// 标题通用部分
const queryCommonList = (str) => {
    return [
        {
            label: '文字颜色',
            type: 'colorPicker',
            prop: `title.${str}.color`,

        },
        {
            label: '字体的风格',
            type: 'radio',
            prop: `title.${str}.fontStyle`,
            optionsList: [
                {
                    label: "normal",
                    id: 'normal',
                },
                {
                    label: "italic",
                    id: 'italic',
                },
                {
                    label: "oblique",
                    id: 'oblique',
                },
            ],
        },
        {
            label: '字体的粗细',
            type: 'radio',
            prop: `title.${str}.fontWeight`,
            optionsList: [
                {
                    label: "normal",
                    id: 'normal',
                },
                {
                    label: "bold",
                    id: 'bold',
                },
                {
                    label: "bolder",
                    id: 'bolder',
                },
                {
                    label: "lighter",
                    id: 'lighter',
                },
            ],
        },
        {
            label: '字体系列',
            type: 'radio',
            prop: `title.${str}.fontFamily`,
            optionsList: [
                {
                    label: "serif",
                    id: 'serif',
                },
                {
                    label: "monospace",
                    id: 'monospace',
                },
                {
                    label: "Arial",
                    id: 'Arial',
                },
                {
                    label: "Courier New'",
                    id: 'Courier New',
                },
            ],
        },
        {
            label: '字体大小',
            type: 'number',
            prop: `title.${str}.fontSize`,
            precision: 1,
        },
        {
            label: '行高',
            type: 'number',
            prop: `title.${str}.lineHeight`,
            precision: 1,
        },
        {
            label: '文本显示宽度',
            type: 'number',
            prop: `title.${str}.width`,
            precision: 1,
        },
        {
            label: '文本显示高度',
            type: 'number',
            prop: `title.${str}.height`,
            precision: 1,
        },
        {
            label: '描边颜色',
            type: 'colorPicker',
            prop: `title.${str}.textBorderColor`,
            tooltip: {
                content: '文字本身的描边颜色。'
            },
            precision: 1,
        },
        {
            label: '文本描边宽度',
            type: 'number',
            prop: `title.${str}.textBorderWidth`,
            precision: 1,
        },
        {
            label: '文本描边类型',
            type: 'select',
            prop: `title.${str}.textBorderType`,
            optionsList: [
                {
                    label: "solid",
                    id: 'solid',
                },
                {
                    label: "dashed",
                    id: 'dashed',
                },
                {
                    label: "dotted",
                    id: 'dotted',
                },
            ],
        },

        {
            label: '虚线偏移量',
            type: 'number',
            tooltip: {
                content: `
                        用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
                        更多详情可以参考 MDN lineDashOffset。`
            },
            prop: `title.${str}.textBorderDashOffset`,
            precision: 1,
        },
        {
            label: '阴影颜色',
            type: 'colorPicker',
            prop: `title.${str}.textShadowColor`,
        },
        {
            label: '阴影长度',
            type: 'number',
            prop: `title.${str}.textShadowBlur`,
            precision: 1,
        },
        {
            label: '阴影 X 偏移',
            type: 'number',
            prop: `title.${str}.textShadowOffsetX`,
            precision: 1,
        },
        {
            label: '阴影 Y 偏移',
            type: 'number',
            prop: `title.${str}.textShadowOffsetY`,
            precision: 1,
        },
        {
            label: '换行',
            type: 'radio',
            tooltip: {
                content: `
                        文字超出宽度是否截断或者换行。配置width时有效
                        'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
                        'break' 换行
                        'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
                        `
            },
            prop: `title.${str}.overflow`,
            optionsList: [
                {
                    label: "truncate",
                    id: 'truncate',
                },
                {
                    label: "break",
                    id: 'break',
                },
                {
                    label: "breakAll",
                    id: 'breakAll',
                },
            ],
        },
        {
            label: '文本',
            type: 'input',
            tooltip: {
                content: `在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。`
            },
            prop: `title.${str}.ellipsis`,
        },
        {
            label: '超出高度',
            type: 'radio',
            tooltip: {
                content: `文本超出高度部分是否截断，配置height时有效。`
            },
            prop: `title.${str}.lineOverflow`,
            optionsList: [
                {
                    label: "truncate",
                    id: 'truncate',
                },
            ],
        },
    ]
}
// 图表通用配置项
const commonOptions = [
    // title: {...}
    {
        label: '通用-标题组件',
        prop: 'title',
        formConfig: {
            labelWidth: 120,
            rows: 1,
            cols: 1,
            list: [
                {
                    type: "render",
                    prop: "render",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>标题-title</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: "是否显示标题",
                    type: "switch",
                    prop: "title.show",
                    defaultValue: true
                },
                {
                    label: "标题文本",
                    type: "input",
                    prop: "title.text",
                },
                {
                    label: "标题超链接",
                    type: "input",
                    prop: "title.link",
                },
                {
                    label: "链接打开方式",
                    type: "radio",
                    prop: "title.target",
                    optionsList: [
                        {
                            label: "当前",
                            id: 'self',
                        },
                        {
                            label: "新开",
                            id: 'blank',
                        },
                    ],
                },
                {
                    type: "render",
                    prop: "render",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>标题-textStyle</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },

                ...queryCommonList('textStyle'),
                {
                    type: "render",
                    prop: "render",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>副标题-subtext</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '副标题文本',
                    type: 'input',
                    prop: 'title.subtext',
                },
                {
                    label: "副标题超链接",
                    type: "input",
                    prop: "title.sublink",
                },
                {
                    label: "链接打开方式",
                    type: "radio",
                    prop: "title.subtarget",
                    optionsList: [
                        {
                            label: "当前",
                            id: 'self',
                        },
                        {
                            label: "新开",
                            id: 'blank',
                        },
                    ],
                },
                {
                    type: "render",
                    prop: "render",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>副标题-subtextStyle</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                ...queryCommonList('subtextStyle'),
            ]
        }
    },
    // legend: {...}
    {
        label: '通用-图例组件',
        prop: 'legend',
        formConfig: {
            labelWidth: 120,
            rows: 1,
            cols: 1,
            list: [
                {
                    label: "图例的类型",
                    type: "radio",
                    prop: "legend.type",
                    optionsList: [
                        {
                            label: "普通图例",
                            id: 'plain',
                        },
                        {
                            label: "可滚动",
                            id: 'scroll',
                        },
                    ],
                },
                {
                    label: "是否显示",
                    type: "switch",
                    prop: "legend.show",
                    optionsList: [
                        {
                            label: "普通图例",
                            id: 'plain',
                        },
                        {
                            label: "可滚动",
                            id: 'scroll',
                        },
                    ],
                    // handlerChange(model) {
                    //     console.log(model);
                    //     let legendList = model.series.map(item => ({ name: item.name }))
                    //     // this.model.legend.data
                    // }
                },
                {
                    label: "距左侧的距离",
                    type: 'select',
                    prop: "legend.left",
                    tooltip: {
                        content: '值可以是像 20 这样的具体像素值，可以是像 "20%" 这样相对于容器高宽的百分比'
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "靠左",
                            id: 'left',
                        },
                        {
                            label: "居中",
                            id: 'center',
                        },
                        {
                            label: "靠右",
                            id: 'right',
                        },
                    ],
                },
                {
                    label: "距右侧的距离",
                    type: 'select',
                    prop: "legend.right",
                    tooltip: {
                        content: '值可以是像 20 这样的具体像素值，可以是像 "20%" 这样相对于容器高宽的百分比'
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "靠左",
                            id: 'left',
                        },
                        {
                            label: "居中",
                            id: 'center',
                        },
                        {
                            label: "靠右",
                            id: 'right',
                        },
                    ],
                },
                {
                    label: "距顶部的距离",
                    type: 'select',
                    prop: "legend.top",
                    tooltip: {
                        content: '值可以是像 20 这样的具体像素值，可以是像 "20%" 这样相对于容器高宽的百分比'
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "靠上",
                            id: 'top',
                        },
                        {
                            label: "居中",
                            id: 'middle',
                        },
                        {
                            label: "靠下",
                            id: 'bottom',
                        },
                    ],
                },
                {
                    label: "距底部的距离",
                    type: 'select',
                    prop: "legend.bottom",
                    tooltip: {
                        content: '值可以是像 20 这样的具体像素值，可以是像 "20%" 这样相对于容器高宽的百分比'
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "靠上",
                            id: 'top',
                        },
                        {
                            label: "居中",
                            id: 'middle',
                        },
                        {
                            label: "靠下",
                            id: 'bottom',
                        },
                    ],
                },
                {
                    label: "宽度",
                    type: 'input',
                    prop: "legend.width",
                    tooltip: {
                        content: '图例组件的宽度。默认自适应。'
                    },
                },
                {
                    label: "高度",
                    type: 'input',
                    prop: "legend.height",
                    tooltip: {
                        content: '图例组件的高度。默认自适应。'
                    },
                },
                {
                    label: "布局朝向",
                    type: 'select',
                    prop: "legend.orient",
                    tooltip: {
                        content: '图例列表的布局朝向。'
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "horizontal",
                            id: 'horizontal',
                        },
                        {
                            label: "vertical",
                            id: 'vertical',
                        },
                    ],
                },
                {
                    label: "文本的对齐",
                    type: 'select',
                    prop: "legend.align",
                    tooltip: {
                        content: "图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'"
                    },
                    filterable: true,
                    optionsList: [
                        {
                            label: "auto",
                            id: 'auto',
                        },
                        {
                            label: "left",
                            id: 'left',
                        },
                        {
                            label: "right",
                            id: 'right',
                        },
                    ],
                },
                {
                    label: "图例内边距",
                    type: 'select',
                    prop: "legend.padding",
                    tooltip: {
                        content: "图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距, 最多4个, 上-右-下-左"
                    },
                    filterable: true,
                    multiple: true,
                    optionsList: []
                },
                {
                    label: "每项之间间隔",
                    type: 'number',
                    prop: "legend.itemGap",
                    tooltip: {
                        content: "图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。"
                    },
                },
                {
                    label: "图形宽度",
                    type: 'number',
                    prop: "legend.itemWidth",
                    tooltip: {
                        content: "图例标记的图形宽度。"
                    },
                },
                {
                    label: "图形高度",
                    type: 'number',
                    prop: "legend.itemHeight",
                    tooltip: {
                        content: "图例标记的图形宽度。"
                    },
                },
                {
                    type: "render",
                    prop: "render",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>图形样式-itemStyle</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '文字颜色',
                    type: 'colorPicker',
                    prop: `legend.itemStyle.color`,
                },
                {
                    label: '描边颜色',
                    type: 'colorPicker',
                    prop: `legend.itemStyle.borderColor`,
                },
            ]
        }
    }

]

export { commonOptions }